<template>
	<view class="container">
		<view class="coach-info-wrapper primary-bg margin-top-xs">
			<view class="coach-info padding-left padding-right flex align-center">
				<view class="avatar">
					<image :src="coachInfo.cover_url" mode="aspectFit"></image>
				</view>
				<view class="info flex-direction justify-around">
					<view class="name-info flex align-center">
						<view class="text-lg text-white">{{coachInfo.realname}}</view>
					</view>
					<view class="tips-txt">{{coachInfo.brief_intro_ellipsis}}</view>
					<view class="margin-top flex align-center">
						<view class="text-gray text-sm">起售节数：{{coachInfo.sale_num}}</view>
						<view class="ml80">
							<text class="text-orange">¥{{coachInfo.price}}</text>
							<text class="text-white">/节</text>
						</view>
					</view>
				</view>
			</view>
			<view class="buy-num-wrapper padding-left padding-right flex align-center justify-between">
				<view class="title text-white">购买节数</view>
				<view class="text-sm">
					<lz-numinput @change="changeSaleNum" inputName="sale_num" :value="selectNum" :min="coachInfo.sale_num" btnStyle="color:#f37b1d;" inputStyle="color: #FFFFFF; width: 30upx;"></lz-numinput>
				</view>
			</view>
			<view class="total-fee-wrapper mt50 padding-left padding-right flex align-center justify-between">
				<view class="title text-white">总价</view>
				<view class="total-fee text-lg">¥{{totalFee}}</view>
			</view>
		</view>
		<view class="user-info-wrapper margin-top-xs primary-bg padding">
			<view class="title text-lg text-white">联系人信息</view>
			<view class="user-form mt50">
				<view class="username margin-left"><input class="text-gray" type="text" v-model="username" placeholder="请输入姓名" /></view>
				<view class="phone margin-top-sm margin-left"><input class="text-gray" type="text" v-model="phone" placeholder="请输入手机号码"/></view>
			</view>
		</view>
		<view class="button-area text-center">
			<view class="agreement text-sm">
				<text class="text-gray">提交订单表示你已阅读并同意</text>
				<text class="text-orange">《用户服务条款》</text>
			</view>
			<div class="button-inner">
				<button @tap="submitOrder" class="cu-btn lg block bg-orange">提交订单</button>
			</div>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util.js';
import coach from '@/api/coach.js';
import coachOrder from '@/api/coach_order.js';
import lzNuminput from '@/components/lz-numinput/lz-numinput.vue';

export default {
	components: {lzNuminput},
	data() {
		return {
			coachInfo: {},
			selectNum: 0,
			totalFee: 0,
			username: '',
			phone: '',
		}
	},
	onLoad(options) {
		this.initUserInfo();
		this.getCoachInfo(options.id);
	},
	methods: {
		initUserInfo() {
			const userInfo = uni.getStorageSync('user_info');
			this.username = userInfo.realname;
			this.phone = userInfo.phone;
		},
		async getCoachInfo(id) {
			const res = await coach.show(id);
			this.coachInfo = res.data;
			this.selectNum = this.coachInfo.sale_num;
		},
		changeSaleNum(res) {
			let selectNum = res.value
			const price = this.coachInfo.price;
			const totalFee = (selectNum * price).toFixed(2);
			this.selectNum = selectNum;
			this.totalFee = totalFee;
		},
		async submitOrder() {
			const _this = this;
			if (_this.username.trim() === '') {
				uni.showToast({
					title: '请填写姓名',
					icon: 'none'
				});
				return false;
			}
			if (_this.phone.trim() === '') {
				uni.showToast({
					title: '请填写手机号码',
					icon: 'none'
				});
				return false;
			}
			
			uni.login({
				provider: 'weixin',
				success: async function (loginRes) {
					const res = await coachOrder.store({code: loginRes.code, coach_id: _this.coachInfo.id, select_num: _this.selectNum, username: _this.username, phone: _this.phone});
					let payParams = res.data.pay_params;
					let order = res.data.order;
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: String(payParams.timeStamp),
						nonceStr: payParams.nonceStr,
						package: payParams.package,
						signType: payParams.signType,
						paySign: payParams.paySign,
						success: function (res) {
							if (res.errMsg === 'requestPayment:ok') {
								uni.showToast({
									title: '支付成功，正在查询订单状态',
									icon: 'none'
								}, 1000);
								_this.queryOrderStatus(order.id);
							}
						},
						fail: function (err) {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							}, 1000);
						}
					});
				}
			});
		},
		async queryOrderStatus(id) {
			const res = await coachOrder.show(id, {type: 'pay_status'});
			if (res.data.is_paid) {
				uni.showModal({
					title: '成功提醒',
					content: '订单支付成功',
					showCancel: false,
					confirmText: '查看订单',
					success(action) {
						if (action.confirm) {
							util.toCoachOrder();
						}
					}
				});
			} else {
				uni.showModal({
					title: '失败提醒',
					content: '订单支付失败',
					showCancel: false,
					confirmText: '我知道了'
				});
			}
		}
	}
}
</script>
<style>
  @import '../../components/lz-numinput/lzui-css/index.css';
</style>
<style scoped lang="less">
	page {
		background-color: #efefef;
	}
	.container {
		.coach-info-wrapper {
			padding-bottom: 30upx;
			.coach-info  {
				height: 200upx;
				border-bottom: 1px solid #222222;
				.avatar {
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
					margin-left: 20upx;
					image {
						height: 100%;
						border-radius: 50%;
					}
				}
				.info {
					width: 100%;
					margin-left: 60upx;
					.sale-num {
						margin-left: 80upx;
					}
				}
			}
			.buy-num-wrapper {
				width: 100%;
				margin-top: 40upx;
			}
		}
		
		.total-fee-wrapper {
			.total-fee {
				color: #f37b1d;
			}
		}
		.button-area {
			width: 100%;
			margin-top: 150upx;
			.agreement {
				background-color: #485575;
				display: inline;
				padding: 8upx 30upx;
				border-radius: 20upx;
			}
			.button-inner {
				width: 80%;
				margin: 100upx auto;
			}
		}
	}
</style>
